<template>
  <div style="width: 100% ;height:100%;margin: 0 auto;background-color: #F7F7F7;padding-bottom: 650px">
    <div style="width:1080px;height: 100%;margin: 0 auto;">
      <div style="width: 1080px;height:228px;background-color: rgba(240,240,240,0.45)">
        <p style="height: 40px;padding-top: 20px;padding-left: 30px">
          班次信息
          <span style="display: inline-block;color: red;font-weight: 100;border: 1px solid red;
        border-radius:20px;float: right;margin-right: 50px;width: 90px;text-align: center">
        修改班次
      </span></p>
        <div style="width: 1000px;height: 140px;background-color: white;padding: 40px">
<!--          左侧-->
          <div style="width: 30%;border-right: 1px dashed gray;display: inline-block">
            <p style="padding-left: 30px;padding-top: 20px">船名: <span style="color: #0dd0a0">{{ data.boatId }}</span></p>
            <p style="padding-left: 30px;padding-top: 20px">舱位: <span>一层前A区</span></p>
            <p style="padding-left: 30px;padding-top: 20px">票价: <span>￥<span style="color: red;font-size: 20px">{{data.price}}</span></span></p>
          </div>
<!--          右侧-->
          <div style="
                display: flex;
                justify-content: space-around;
                float: right;
                margin: 25px 45px 0 0px;
                width: 580px;"
          >
            <div style="display: inline-block;float: left;width: 100px;height: 93px; ">
              <h1 style="text-align: right">{{data.sendTime}}</h1>
              <p style="text-align: center">{{ data.beginningName }}</p>
            </div>
<!--            船标-->
            <div style="display: inline-block;width: 185px;height: 93px; ">
              <div style="margin:0 auto;width: 33px;margin-top: 20px">
                <img src="https://file.40017.cn/ship/img/ship_pc/ship_pc_logo_icon.png" alt="">
              </div>
              <p style="text-align:center; ">{{formatDuration(data.time)}}</p>
            </div>
            <div style="display: inline-block;float: right;width: 100px;height: 93px;">
              <h1 style="text-align: left">{{ arrivalTime }}</h1>
              <p style="text-align: center">{{ data.destinationName }}</p>
            </div>
          </div>
        </div>

        <div class="tongzhi" style="width: 1000px;background-color: white;padding: 40px;margin-top: 30px">
            <h3>预定须知</h3>
            <p>购票证件：二代身份证</p>
            <p>支持票种：成人票，儿童票（6周岁（含）-14周岁（不含）），携童票（0周岁（含）-6周岁（不含））</p>
            <p>预定时间：二代身份证</p>
            <p>检票方式：二代身份证</p>
          <h3>取票说明</h3>
          <p>取票方式：二代身份证</p>
          <p>购票通知：请携带好有效身份证前往出发港口取票</p>
          <h3>退改说明</h3>
          <p>线上退票：支持退票</p>
          <p>退票手续费：港口收取10%</p>
        </div>

        <div style="width:180px;margin-left: 430px;margin-top: 22px">
          <el-button style="width: 180px;height: 50px;background-color:#FF6257;color: white;font-size: 17px" @click="submitOrders">
            提交订单
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref,onMounted,computed } from 'vue'
import { useRoute } from 'vue-router'; //引入路由接受参数
import router from "@/router/index.js"; //用于路由跳转
import { submitOrder } from "@/api/shouyePub.js";  //引入方法api

const route = useRoute() //在组件中访问当前的路由信息  实例化

// 计算属性方式（响应式）
const rowData = computed(() => {
  try {
    return route.query.rowData
        ? JSON.parse(route.query.rowData)
        : null
  } catch {
    return null
  }
})

//格式化时间
const formatDuration = (timeStr) => {
  if (!timeStr) return '--';

  // 拆分小时、分钟、秒
  const [hours, minutes] = timeStr.split(':').map(Number);

  // 构建显示文本
  let result = '';
  if (hours > 0) result += `${hours}时`;
  if (minutes > 0) result += `${minutes}分`;

  return result || '0分';
};

/**
 * 获取数据
 */
const data= ref(null)
data.value = rowData.value

if(data) {
  console.log('接收到的数据:', data.value)
  // 这里处理业务逻辑
}

// 计算到达时间
const arrivalTime = computed(() => {  // 计算属性
  try {
    // 解析发船时间
    const [sendHours, sendMinutes] = data.value.sendTime.split(':').map(Number);

    // 解析耗时（忽略秒数）
    const [durationHours, durationMinutes] = data.value.time.split(':').map(Number);

    // 计算总分钟数
    let totalMinutes = sendMinutes + durationMinutes;
    let totalHours = sendHours + durationHours + Math.floor(totalMinutes / 60);

    // 处理分钟进位
    totalMinutes %= 60;

    // 处理跨天（超过24小时）
    totalHours %= 24;  // 可选：显示为次日

    // 格式化输出
    return `${String(totalHours).padStart(2, '0')}:${String(totalMinutes).padStart(2, '0')}`;
  } catch (e) {
    return '--:--';
  }
});

const orderInfo = computed(() => ({
  orderName: data.value.boatId || '', // 处理未加载状态
  classification: 4,
  startTime: new Date(),  // 开始时间
  endTime: new Date(), // 结束时间
  price: data.value.price  || 0,       // 默认值防止 NaN
  good: data.value.id
}))

//提交船票订单
const submitOrders =async () => {
  console.log(orderInfo.value)
  const orderInfoData = await submitOrder(orderInfo.value)
  console.log(orderInfoData)
  if (orderInfoData.data.code == 200) {
    ElMessage({
      message: '预订成功',
      type: 'success',
    })
    await router.push({path: '/MyXinXi'})
    //强制刷新
    location.reload()
  } else {
    ElMessage({
      message: '预订失败',
      type: 'error',
    })
  }
}

// 生命周期中使用
onMounted(() => {

})

</script>


<style scoped>
.tongzhi p{
  margin-left: 20px;
  margin-top: 5px;
}
</style>